<template>
	<view>
		<view class="tabbarTop">
			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left='scollLeft'>
				<view class="scroll-view-item_H" v-for="(item,index) in tabBars" :key="index" @click="indexBtn(index)"
					:style="{color:index==tabIndex?selectedTextColor:textColor}" :class="{'active':index==tabIndex}">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<view class="uni-margin-wrap">
			<swiper class="swiper" :duration="200" :current="tabIndex">
				<swiper-item>
					<!-- 阅读插槽 -->
					<view class="swiper-item">
						<slot name="read"></slot>
					</view>
				</swiper-item>
				<swiper-item>
					<!-- 图文插槽 -->
					<view class="swiper-item">
						<slot name="imageText"></slot>
					</view>
				</swiper-item>
				<swiper-item>
					<!-- 问答插槽 -->
					<view class="swiper-item">
						<slot name="answer"></slot>
					</view>
				</swiper-item>
				<swiper-item>
					<!-- 视频插槽 -->
					<view class="swiper-item">
						<slot name="video"></slot>
					</view>
				</swiper-item>
				<swiper-item>
					<!-- 小记插槽 -->
					<view class="swiper-item">
						<slot name="notes"></slot>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TabbarSwiper',
		props: {
			//导航字体选中时的颜色
			selectedTextColor: {
				type: String,
				default: '#E88807'
			},
			//导航字体默认颜色
			textColor: {
				type: String,
				default: '#000'
			},
			//导航文本
			tabBars: {
				type: Array,
				default: [{
					name: "阅读",
					id: 0
				}, {
					name: "图文",
					id: 1
				}, {
					name: "问答",
					id: 2
				}, {
					name: "视频",
					id: 3
				}, {
					name: "小记",
					id: 4
				}]
			}
		},
		data() {
			return {
				tabIndex: 0 //当前选中的项下标
			}
		},
		methods: {
			//点击后得到当前下标索引值，并根据当前下标索引值去更改操作和切换视图
			indexBtn(item) {
				this.tabIndex = item;
			}
		},
		computed: {
			//点击下标索引为2时，让滑动条向左滑动
			scollLeft: function() {
				if (this.tabIndex === 2) {
					return 40;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 25%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		// border-right: 1px solid red;
	}

	.active {
		font-size: 38rpx;
		font-weight: 700;
	}
</style>
